<template>
	<div class="companyDetail">
		<el-row class="company-top">
			<el-col :span="20" :offset="2">
				<div class="info">
					<img src="../../../static/image/headpic.png" alt="" class="company_pic">
					<div class="company">
						<div class="title flex">北京智行瑞景科技有限公司 <div class="gw flex"><img src="../../../static/image/company.png" alt=""
								 class="src">查看官网</div>
						</div>
						<div class="count"><span>上市公司</span><span class="person">100-500人</span></div>
						<div class="hy">互联网/IT/电子/通信</div>
					</div>
					<div class="edite flex" @click.stop="goUrl('/editeDetail')"><img src="../../../static/image/edite.png" alt="" class="src">编辑</div>
				</div>
				<div class="address flex"> <img src="../../../static/image/wposition.png" alt="" class="src">杭州西湖区蒋村商务中心(北2门)B2楼503室
					<span>查看地图</span> </div>
			</el-col>
		</el-row>
		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col >
				<head-top title='在招职位'></head-top>
			</el-col>
		</el-row>

		<el-row>
			<el-col class="positions">
				<positioncom v-for="(item,index) in joblist" :item="item" :key='index'></positioncom>
				<div class="row" style="justify-content: flex-end;">
					<div class="pagination">
						<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col  class="editerow">
				<head-top title='公司简介'></head-top>
				<div class="edite flex">
					<img src="../../../static/image/edite.png" alt="" class="src">编辑
				</div>
			</el-col>

		</el-row>

		<el-row style="margin-bottom: 24px;">
			<el-col  class="editerow">
				<div class="Companyprofile">
					牛股王成立于2014年，是新生代股票社区类领军企业。公司专注于以技术驱动产品创新，降低普通投资者交易门槛，提供极致体验和优质服务，现已拥有3000万用户规
					模，涉及股票、基金、资管、量化等多个板块。
					发展理念：以金融科技为核心驱动力，运用人工智能和量化技术实现对传统证券零售及资管业务的升级，满足用户日益增长的个性化投资需求，成长为具有国际专业水准
					的、中国一流的互联网证券零售及资管服务平台。
					核心团队：“互联网技术人才+金融专家”组合，骨干成员来自阿里、腾讯、百度等互联网公司及香港中银国际、中信国际、野村证券、辉立证券、中泰证券等金融机构，整
					合业界领先的技术开发与金融研究能力，产品迭代节奏远高于同行。
				</div>
			</el-col>

		</el-row>
		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col  class="editerow">
				<head-top title='企业文化'></head-top>
				<div class="edite flex">
					<img src="../../../static/image/edite.png" alt="" class="src">编辑
				</div>
			</el-col>
		
		</el-row>
		
		<el-row style="margin-bottom: 24px;">
			<el-col  class="editerow">
				<div class="Companyprofile">
					牛股王成立于2014年，是新生代股票社区类领军企业。公司专注于以技术驱动产品创新，降低普通投资者交易门槛，提供极致体验和优质服务，现已拥有3000万用户规
					模，涉及股票、基金、资管、量化等多个板块。
					发展理念：以金融科技为核心驱动力，运用人工智能和量化技术实现对传统证券零售及资管业务的升级，满足用户日益增长的个性化投资需求，成长为具有国际专业水准
					的、中国一流的互联网证券零售及资管服务平台。
					核心团队：“互联网技术人才+金融专家”组合，骨干成员来自阿里、腾讯、百度等互联网公司及香港中银国际、中信国际、野村证券、辉立证券、中泰证券等金融机构，整
					合业界领先的技术开发与金融研究能力，产品迭代节奏远高于同行。
				</div>
			</el-col>
		
		</el-row>
	</div>

</template>

<script>
	import headTop from '@/components/headTop'
	import positioncom from '@/components/positioncom.vue'
	export default {
		data() {
			return {
				joblist: [{}, {}, {}],
				cur_page: 1,
				total: 100,
			}
		},
		components: {
			headTop,
			positioncom
		},
		created() {

		},
		methods: {
			//页面跳转
			goUrl(url){
				console.log(url);
				this.$router.push({
					path:url
				})
			},
			
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.getList();
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '../../style/mixin';

	.companyDetail {
		.Companyprofile {
			color: #999999;
			font-size: 16px;
			line-height: 40px;
		}

		.editerow {
			display: flex;
			align-items: center;
			position: relative;

			.edite {
				color: #226FFF;
				font-size: 16px;
				position: absolute;
				right: 0px;
				cursor: pointer;

				img {
					width: 18px;
					height: 18px;
					margin-right: 6px;
				}
			}
		}


		padding-bottom:40px;
		box-sizing: border-box;

		.positions {
			display: flex;
			flex-direction: column;
		}

		.company-top {
			width: 100%;
			height: 239px;
			background-color: #444C5F;
			padding: 40px 0px;
			box-sizing: border-box;

			.address {
				margin-top: 20px;
				color: #FFFFFF;
				font-size: 16px;

				img {
					width: 22px;
					height: 22px;
					margin-right: 10px;
				}

				span {
					margin-left: 30px;
					color: #226FFF;
					font-size: 16px;
				}
			}

			.info {
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				padding-bottom: 20px;
				box-sizing: border-box;
				position: relative;

				.edite {
					position: absolute;
					right: 0px;
					top: 10px;
					color: #226FFF;
					font-size: 16px;
					display: flex;
					align-items: center;
                    cursor: pointer;
					img {
						vertical-align: middle;
						width: 18px;
						height: 18px;
						margin-right: 6px;
					}
				}

				.company_pic {
					width: 97px;
					height: 97px;
				}

				.company {
					margin-left: 20px;

					.title {
						width: 100%;
						color: #FFFFFF;
						font-size: 24px;

						.gw {
							margin-left: 20px;
							width: 90px;
							padding: 6px 0px;
							box-sizing: border-box;
							background: #404F6F;
							display: flex;
							justify-content: center;
							color: #226FFF;
							font-size: 14px;
							cursor: pointer;

							img {
								width: 14px;
								height: 14px;
								margin-right: 5px;
							}
						}
					}

					.person {
						&:before {
							// padding-left: 20px;
							// box-sizing: border-box;
							// margin-left: 20px;
							content: "";
							margin-left: 15px;
							padding-left: 15px;
							border-left: 1px solid #999999;
							height: 16px;
							display: inline-block;
							vertical-align: middle;
						}
					}

					.count {
						margin: 12px 0px 8px;

					}

					.count,
					.hy {
						color: #999999;
						font-size: 16px;
					}
				}
			}
		}
	}
</style>
